<template>
  <div class="play-box" v-if="renderData">
    <div class="title">{{ renderData.playTypeName }}</div>
    <subGameVav :data="renderData.lotteryPlayTypeList" @selectPlayType="selectPlayType"></subGameVav>
    <div class="game-nav-underline"></div>
    <div class="play-odds">
      <OddsBtnRound
        @selectOdds="selectNumber(numItem, renderData.lotteryPlayTypeList[currentPlayTypeIndex].playTypeName)"
        v-for="(numItem, index) in numberList"
        :itemStyle="handleRoundStyle(numItem).itemStyle"
        :numberStyle="handleRoundStyle(numItem).numberStyle"
        :oddsStyle="handleRoundStyle(numItem).oddsStyle"
        :data="{ number: numItem }"
        :key="index"
      />
    </div>
  </div>
</template>

<script>
import OddsBtnRound from './odds-btn-round.vue'
import { handleStyleFromDifferentColorNum, numberList } from '@/config/markSixConfig.js'
import mixin from '@/mixin/xglhc-mixin.js'
import { $utils } from '@utils'
import { showToast } from 'vant'
import { submitBetNow } from '@/api'
import subGameVav from './sub-game-nav.vue'

// 自选不中：规定要选几个号
const tabEnum = {
  ZXWUBZ: 5,
  ZXLIUBZ: 6,
  ZXQIBZ: 7,
  ZXBABZ: 8,
  ZXJIUBZ: 9,
  ZXSHIBZ: 10,
}

export default {
  name: 'xglhc-zxbz-game',
  components: {
    OddsBtnRound,
    subGameVav,
  },
  mixins: [mixin],
  props: {
    renderData: {},
  },
  data() {
    return {
      numberList: numberList,
    }
  },

  computed: {
    // 获取 游戏赔率,
    getNumOddsList() {
      let data = this.renderData
      if ($utils.isEmpty(this.renderData)) return []
      return data.lotteryPlayTypeList[0].cachePlayList
    },

    // 有子玩法
    hasSonPlay() {
      return false
    },
  },
  methods: {
    // 选择赔率
    selectNumber(number, preName) {
      // 之前选中的数据
      let list = this.getSelectNumOddsList
      let item = JSON.parse(JSON.stringify(this.getNumOddsList))
      item.number = number
      item.playName = item.playTypeCode

      item.betAmount = this.investStore.getSingleInvestMoney
      item['spliceName'] = `${preName}#${item.number}`
      // 多选的情况
      let findItem = list.map((item) => item.number).indexOf(number)
      if (findItem === -1) {
        if (this.getSelectNumOddsList.length === 11) {
          showToast(`最多选择11个号码`)
          return
        }

        list.push(item)
        this.notifyParentInvestList(list)
      } else {
        list.splice(findItem, 1)
        this.notifyParentInvestList(list)
      }
    },

    // 子游戏下注前的检验规则
    sonBetVerifyBetAmount() {
      const { playTypeCode } = this.renderData.lotteryPlayTypeList[this.currentPlayTypeIndex]
      const minLength = tabEnum[playTypeCode]
      if (this.getSelectNumOddsList.length < minLength || this.getSelectNumOddsList.length > 11) {
        showToast(`请选择${minLength}~11个号码`)
        return false
      }
      return $utils.verifyBetAmount(this.getSelectNumOddsList)
    },

    // 重复投注， 填充最后一期投注号码
    fillLastNumber() {
      let list = this.investStore.lastInvestList //最后一次记录
      // 连码的提交格式，要成数组
      const betContent = list[0].betContent.split(' ')
      if (betContent.length > 2) {
        list = betContent.map((number) => {
          let obj = JSON.parse(JSON.stringify(list[0]))
          obj.number = number
          obj.playName = obj.playTypeCode
          delete obj.betContent
          return obj
        })
      }
      if (this.hasSonPlay) {
        this.selectNumberList[this.currentPlayTypeIndex] = list
      } else {
        this.selectNumberList = list
      }
      this.investStore.setInputMoney(list[0].betAmount)
      this.notifyParentInvestList(list)
    },

    // 立即下注, 目前暂时有两种格式，
    async betNow() {
      if (!this.investStore.getInvestBtnText.canBat) {
        this.fillLastNumber()
        return
      }

      if (!this.sonBetVerifyBetAmount()) return

      let params = {
        lotteryCode: this.renderData.lotteryCode, //彩种类型，如六合彩LHC
        orderDetails: [],
      }

      const capCode = this.gameStore.currentHandicapCode
      if (capCode) params.handicapCode = capCode

      let betContent = ''
      this.getSelectNumOddsList.forEach((numItem) => {
        betContent += numItem.number + ' '
      })

      // 找到对应的游戏玩法， 用户选择5个号，就是自选5， 6个号就是自选6
      let index = Math.abs(5 - this.getSelectNumOddsList.length)
      let gameTypeItem = this.renderData.lotteryPlayTypeList[index].cachePlayList[0]

      params.orderDetails.push({
        lotteryCode: this.renderData.lotteryCode, // 彩种类型，如六合彩LHC
        playTypeCode: this.renderData.playTypeCode, // 彩种CODE，
        sonPlayTypeCode: gameTypeItem.sonPlayTypeCode, // 选中号码 的item信息
        playCode: gameTypeItem.playCode, // 选中号码 的item信息
        betContent: betContent.trim(), // 注单内容，与playCode保持一致
        betAmount: this.getSelectNumOddsList[0].betAmount, // 单注金额
      })

      await submitBetNow({
        lotteryCode: params.lotteryCode,
        orderDetails: [params.orderDetails[0]],
        handicapCode: params.handicapCode
      })
      this.investStore.setLastInvestList(params.orderDetails)
      showToast('下注成功')
      this.initConfig()
    },

    // 根据赔率号码类型 处理不同的样式
    handleRoundStyle(number) {
      let styleStore = handleStyleFromDifferentColorNum(number)
      // console.log(styleStore, 'styleStore')
      const numbers = this.getSelectNumOddsList.map((item) => item.number)
      if (numbers.includes(number)) {
        return styleStore.active
      }
      return styleStore.normal
    },
  },
}
</script>

<style scoped lang="less">
@import url('./common.less');

.play-odds {
  justify-content: space-around !important;
}
</style>
